import {CommonComponentProps} from "../../../../components/editor/interface.ts";
import {useMateRailDrop} from "../../../hooks/useMaterialDrop.ts";
import {CSSProperties, useEffect, useRef} from "react";
import {useDrag} from "react-dnd";
import {ContainerDndAccept} from "../../DnDAccept.tsx";

export interface ContainerProps extends CommonComponentProps {
    id: number;
    name: string;
    parentId?: number;
    styles?: CSSProperties;
    children?: any;
}

const Container = ({id, children, styles, name}: ContainerProps) => {
    const divRef = useRef<HTMLDivElement>(null);


    const {canDrop, drop} = useMateRailDrop([...ContainerDndAccept], id)
    const [_, drag] = useDrag({
        type: "Container",
        item: {
            type: name,
            dragType: 'move',
            id: id
        }
    });

    useEffect(() => {
        if (divRef.current) {
            drag(divRef)
            drop(divRef)
        }
    }, []);
    return (
        <div
            ref={divRef}
            data-component-id={id}
            style={styles}
            className={`h-[auto] p-[20px] ${canDrop ? 'border-[2px] border-[blue]' : 'border-[1px] border-[#000]'}`}
        >
            {
                // @ts-ignore
                children?.length > 0 ? children : <div
                    className={'bg-gray-300 w-full h-[200px] min-h-[100%] flex justify-center items-center'}>将组件拖拽到此处</div>
            }
        </div>
    )
}

export default Container;